<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
</head>
<body>
    <h2>员工管理</h2>
    <div style="margin:10px 0;"></div>
    <table id="employee"></table>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:600px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">员工信息</div>
        <form id="fm" method="post" novalidate>
        <div class="ftitle">必填信息</div>
            <div class="fitem">
                <label>用户名:</label>
                <input name="name" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>姓名:</label>
                <input name="display" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>密码:</label>
                <input name="password" class="easyui-validatebox" required="true" type="password">
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="email" class="easyui-validatebox" validType="email" required="true" >
            </div>
            <div class="ftitle">其他信息</div>
            <div class="fitem">
                <label>性别:</label>
                <select name="sex">
                	<option value="MAN" selected="selected">男</option>
                	<option value="WOMAN">女</option>
                </select>
            </div>
	       <div class="fitem">
                <label>角色:</label>
                <input id="roles">
            </div>
            <div class="fitem">
                <label>电话</label>
                <input name="cell">
            </div>
            <div class="fitem">
                <label>毕业院校:</label>
                <input name="college">
            </div>
            <div class="fitem">
                <label>学历:</label>
                <input name="education">
            </div>
            <div class="fitem">
                <label>年龄:</label>
                <input name="age" class="easyui-numberbox">
            </div>
            <div class="fitem">
                <label>薪水:</label>
                <input name="salary" class="easyui-numberbox">
            </div>  
            <div class="fitem">
                <label>状态:</label>
                <select name="status">
                	<option value="Active">活动</option>
                	<option value="Frozen">冻结</option>
                </select>
            </div>                                                          
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="employeeListJs.saveUser()">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
    <script type="text/javascript">
(function(employeeListJs, $, undefined ) {     
    var roleList;
	$('#employee').datagrid({
		title:'员工信息',
		iconCls:'icon-save',
		height:350,
		fitColumns:true,
		singleSelect:true,
		url:null,
		frozenColumns:[[
						{title:'ID',field:'id',width:20}  
	                ]],  
	    columns:[[
                    {title:'用户名',field:'name',width:50,sortable:true},
	             	{title:'姓名',field:'display',width:50,sortable:true},
					{title:'email',field:'email',width:50,sortable:false},
					{title:'电话',field:'cell',width:50},
					{title:'角色',field:'roles',width:40},
					{title:'状态',field:'status',width:40,sortable:true}
	             ]],
		toolbar:[{  
            id:'btnadd',  
            text:'添加',  
            iconCls:'icon-add',  
            handler:newUser
        },{  
            id:'btnupdate',  
            text:'修改',  
            iconCls:'icon-edit',  
            handler:editUser
        },'-',{  
            id:'btnrefresh',  
            text:'刷新',  
            iconCls:'icon-reload',  
            handler:refreshUser
        }],  
	    onLoadSuccess: function(){   
	        $('#employee').datagrid('loaded');
	    }  
	});
	
	employeeListJs.init = function(){
		refreshUser();
	}
	
	employeeListJs.initRoleList = function(result){
    	var res = result.result;
        if(res == "SUCCESS")
        {
    		var payload = jQuery.parseJSON(result.payload.value);
    		roleList = payload.rows;
        }else
        {
        	$.messager.alert("Error","加载角色信息失败");
        }
	};
	employeeListJs.loadEmployeeData = function(result){
		$('#employee').datagrid('loaded');
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	var payload = jQuery.parseJSON(result.payload.value);
        	$('#employee').datagrid('loadData',payload);
        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
	};
	function loadRoleField(){

    		$('#roles').combobox({
    			url:null,
    			valueField:'id',
    			textField:'name',
    			multiple:true,
    			panelHeight:'auto',
    			data:roleList
    		});
	};
	employeeListJs.loadEmployeeDetail = function(result){
        
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	var payload = jQuery.parseJSON(result.payload.value);
       		$('#fm').form('load', payload);
       		
        	if(payload.roles != "")
        	{
    			var array = payload.roles;

    	    	var roles = new Array();
    	    	$(array).each(function(index){
    	    		roles[index] = Number(array[index].id);
    	    	});
    	    	
           		$('#roles').combobox('setValues',roles);
        	}	

        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
	};
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','添加新员工');
        $('#fm').form('clear');
        $("input[name='name']").removeAttr("readonly");
        $("input[name='name']").removeAttr("border");
        loadRoleField();
        url = 'dispatch/manage/employee/create';
    }
    function editUser(){
        var row = $('#employee').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','编辑员工信息');
            $('#fm').form('clear');
            $("input[name='name']").attr("readonly","readonly");
            $("input[name='name']").attr("border","0");
            loadRoleField();
            
            workbenchJs.loadData('dispatch/manage/employee/detail?id='+row.id,employeeListJs.loadEmployeeDetail,"查询员工列表");
            url = 'dispatch/manage/employee/edit?id='+row.id;
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}
    }
    employeeListJs.saveUser = function(){
    	
    	// first 
    	var json = {};
    	json.name = $("input[name='name']").val();
    	json.display = $("input[name='display']").val();
    	json.password = $("input[name='password']").val();
    	json.email = $("input[name='email']").val();
    	json.sex = $("select[name='sex']").val();
    	json.college = $("input[name='college']").val();
    	json.education = $("input[name='education']").val();
    	json.cell = $("input[name='cell']").val();
    	json.salary = parseInt($("input[name='salary']").val());
    	json.age = parseInt($("input[name='age']").val());
		json.status = $("select[name='status']").val();
		
    	var roles = new Array();
    	var r = $('#roles').combobox('getValues');
    	$(r).each(function(index){
    		var role = {};
    		role.id = Number(r[index]);
    		roles[index] = role;
    	});
    	json.roles = roles;
    	var str = $.toJSON(json);
    	str = 'parameters='+str;
    	if($('#fm').form('validate'))
    	{
    		$.ajax({
                type: "post",
                url: url,
                dataType:"json",
                data: str,
                cache: false,
                success: function (result) {
                	var res = result.result;
                    if(res == "SUCCESS")
                    {
                    	$('#dlg').dialog('close');
                    	workbenchJs.loadData("dispatch/manage/employee/all",employeeListJs.loadEmployeeData,"查询员工列表");
                    }else if(res == "COMPONENT_ERROR")
                    {
                    	$.messager.alert("Error",result.payload.value);
                    }else
                    {
                    	$.messager.alert("Error",result.result);
                    }
                    
                }
                
            });
    	}
		
    }
    function refreshUser(){
    	workbenchJs.loadData("dispatch/manage/employee/all",employeeListJs.loadEmployeeData,"查询员工列表");
		workbenchJs.loadData('dispatch/manage/role/all',employeeListJs.initRoleList,"查询角色信息");
    }
}( window.employeeListJs = window.employeeListJs || {}, jQuery ));

$(function(){
	employeeListJs.init();
});  
    	

    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
    </style>
</body>
</html>